<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对齐属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					  【文本和图片垂直居中（对齐）效果】
					  对齐分为四种：基线对齐、顶部对齐、居中对齐、底部对齐
					  元素种类：块元素、行元素、行内块元素
					  块元素特点：独占一行，设置宽高
					  行元素特点：一行内显示、不可以设置宽高
					  网页：元素之间嵌套生成
					  行元素与块元素可以任意嵌套
						前提：设置宽高---行套块
					                 ---块套块   √
								     ---块套行   √
						前提：一行内显示---行套块  √
									   ---块套块  ×
									   ---块套行  √
									   ---行套行  √
		 -->
		 <style>
			  img.baseline{
				/* vertical-align: baseline; 默认基线对齐 */
				vertical-align: baseline;
			 }
			   img.top{
				/*  vertical-align: top; 顶部对齐 */
				vertical-align: top;
			  }
			  img.middle{
				  vertical-align: middle;
			  }
			  img.bottom{
				  vertical-align: bottom;
			  }
		 </style>
	</head>
	<body>
		<!-- 需求：写4个p、嵌套文字： 图片叫什么名字 
		                  文字后加img，设定宽高：25~100px
						  图片后分别加  基线对齐、顶部对齐、居中对齐、底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>石矶娘娘<img class="baseline" src="img/12石矶娘娘_爱给网_aigei_com.png" width="100px" height="200px" alt="石矶娘娘">基线对齐</p>
		 <p>敖润<img class="top" src="img/哪吒2系列敖闰_爱给网_aigei_com.png" alt="姑姑" width="100px" height="200px">顶部对齐</p>
		 <p>哪吒<img class="middle" src="img/哪吒2魔童闹海壁纸海报 (39)_爱给网_aigei_com.jpg" width="100px" height="100px" alt="成魔不成仙">居中对齐</p>
		 <p>太乙<img class="bottom" src="img/哪吒  魔童降世 魔童闹海 敖丙 太乙真人 (27)_爱给网_aigei_com.png"  width="100px" height="100px" alt="打我撒~你打我撒">底部对齐</p>
		 <!-- css选择器--抓第一张图片 ...
		    思路：派生选择器：找后代+伪类选择器：添加效果【错误】
			错误原因：html结构不符合派生特点：p包含4个img才可以
			         伪类选择器，4个img需要在一个p中
			p img：nth-child(1)
		 -->
	</body>
</html>